<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
</head>
<body>
<div class ="contains">
 <ul>
  <li><a href ="#" id="search_li">search</a></li>
  <li><a href ="#" id="insert_li">insert</a></li>
 </ul>
 <button class ="button up">回到顶部</button>
</div>
<div class ="content">
<button class ="button show fi">name</button>
<button class ="button show se">id</button>
<button class ="button show th">age</button>
<button class ="button show fo">sex</button>
<button class ="button show fv">dept</button>
</div>
<div class ="student">
<table class="table  table-dark table-bordered table-hover">
<thead></thead>
<tbody>
<tr class ="tx" th:each="User:${pageInfo}">
<td th:class="sname" th:text="${User.Sname}"></td>
<td th:class="son"  th:text="${User.Son}"></td>
<td th:class="age" th:text="${User.Sage}"></td>
<td th:class="sex" th:text="${User.Ssex}"></td>
<td th:class="sdept" th:text="${User.Sdept}"></td>
<td>
<button class="btn btn-sm btn-primary" onclick="edit_(this)">编辑</button>
<button class="btn btn-sm btn-danger" onclick="delete_(this)">删除</button>
</td>
</tr>
</tbody>
</table>
<div style="float: left" th:if="${totalPages>0}">
		当前第<span th:text="${pageNum}"></span>页,共<span
			th:text="${totalPages}"></span>页,总记录数<span th:text="${total}"></span>
</div>
<div style="float:right" th:if="${totalPages>0}" id="page">
<a th:href="@{${jumpUrl}}" th:text="首页" th:if="${pageNum>1}"th:class ="page-item"></a>
<a th:href="@{${jumpUrl}+${pageNum-1}}" th:text="上一页"th:class ="page-item" th:if="${pageNum>1}"></a>
<a th:href="@{${jumpUrl}+${i}}" th:each="i:${#numbers.sequence(1,totalPages)}" th:text="${i}"
th:class ="${pageNum==i}?'page-item active':'page-item '"></a>
<a th:href="@{${jumpUrl}+${pageNum+1}}" th:text="下一页" th:class="page-item" th:if="${pageNum<totalPages}"></a>
<a th:href="@{${jumpUrl}+${totalPages}}" th:text="尾页" th:class="page-item" th:if="${pageNum<totalPages}"></a>
</div>
</div>
<div class ="edit" id="edit">
<p id="id"> </p>
<p><span>name </span> <input type="text" placeholder="name" class ="text_style" id="name"></p>
<p><span>age </span> <input type="text" placeholder="age"class ="text_style" id="age"></p>
<p><span>sex </span> <input type="text" placeholder="sex"class ="text_style" id="sex"></p>
<p><span>dept </span> <input type="text" placeholder="dept"class ="text_style" id="dept"></p>
<p>
<button class ="edit_button"id="edit_button">确定</button>
<button class ="edit_button" id="close_edit">关闭</button>
</p>
</div>
<div class ="edit" id="insert">
<p><span>id </span> <input type="text" placeholder="id" class ="text_style" id="insert_id"></p>
<p><span>name </span> <input type="text" placeholder="name" class ="text_style" id="insert_name"></p>
<p><span>age </span> <input type="text" placeholder="age"class ="text_style" id="insert_age"></p>
<p><span>sex </span> <input type="text" placeholder="sex"class ="text_style" id="insert_sex"></p>
<p><span>dept </span> <input type="text" placeholder="dept"class ="text_style" id="insert_dept"></p>
<p>
<button class ="edit_button"id="insert_button">确定</button>
<button class ="edit_button" id="close_insert">关闭</button>
</p>
</div>
<div class ="edit" id="search">
<p><span>输入学号</span><input type="text" placeholder="id" class ="text_style" id="search_id"></p>
<p class ="search"id="search_name">name</p>
<p class ="search"id="search_sex">sex</p>
<p class ="search"id="search_age">age</p>
<p class ="search"id="search_dept">dept</p>
<p>
<button class ="edit_button"id="search_button">确定</button>
<button class ="edit_button" id="close_search">关闭</button>
<p>
</div>
<link th:href ="@{/css/manager.css}"  rel ="stylesheet" type ="text/css">
<script  th:src ="@{/js/manager.js}"></script>
<script>
//仅在thealef页面上有用 在导入JS中无效
function delete_(obj)
{var son=$(obj).parents("tr").find(".son").text();
$.ajax({
	url:"delete",
	method:"post",
	data:{id:son},
	dataType:"json",
	success:function(data){
		if(data.status=="success")
			window.location.reload();
		else if(data.status=="fail")
			alert("miss");},
	error:function(data){alert("error");}});}
function edit_(obj)
{
	var son=$(obj).parents("tr").find(".son").text();
	var sname=$(obj).parents("tr").find(".sname").text();
	var age=$(obj).parents("tr").find(".age").text();
	var sex=$(obj).parents("tr").find(".sex").text();
	var sdept=$(obj).parents("tr").find(".sdept").text();
	
	$("#edit").show();
	$("#name").attr({"placeholder":sname,"value":sname});
	$("#age").attr({"placeholder":age,"value":age});
	$("#sex").attr({"placeholder":sex,"value":sex});
	$("#dept").attr({"placeholder":sdept,"value":sdept});
	$("#id").text(son);
	}
 
</script>
</body>
</html>